<template>
  <div class="swipe">
    <mt-swipe :auto="4000">
      <a href=""><mt-swipe-item v-for="item in swipes" :key="item"><img :src="item.img"></mt-swipe-item></a>
    </mt-swipe>
  </div>
</template>

<script>
  import { Swipe, SwipeItem } from 'mint-ui'
  import { requestBanner } from '../api/api'
  export default {
    name: 'swipe',
    components: {
      Swipe: Swipe,
      SwipeItem: SwipeItem
    },
    data () {
      return {
        swipes: []
      }
    },
    mounted () {
      this.$nextTick(() => {
        this.lodaBanner()
      })
    },
    methods: {
      lodaBanner () {
        let e = this
        requestBanner({}).then((res) => {
          e.swipes = res.data.data
        })
      }
    }
  }
</script>

<style scoped lang="less">
  .swipe{
    width: 100%;
    height: 0.8rem;
    overflow: hidden;
    img{
      width: 100%;
      height: 100%;
      display: block;
    }
  }
</style>
